<template>
	<el-dialog  v-model="show" title="请选择短信模板" width="900" align-center>
    <div class="item">
      <div class="name">
        <span class="text">短信模版1</span>
        <span>(短信70字内，按1条短信收费)</span>
      </div>
      <div class="content">
        您有一笔零售柜订单超时未支付，请
        <span class="key">【微信/支付宝】</span>
        搜索
        <span class="key">【乐汇园无人智能售货柜】</span>
        小程序进入支付，以免影响个人信用，如有疑问， 请联系客服
        <span class="key">400-928-8711</span>
        。
      </div>
      <div class="triangle">
        <el-icon style="color:#fff;transform:rotate(90deg);vertical-align: -6px;"><Check /></el-icon>
      </div>
    </div>
    <div class="item">
      <div class="name">
        <span class="text">短信模版1</span>
        <span>(短信70字内，按1条短信收费)</span>
      </div>
      <div class="content">
        您有一笔零售柜订单超时未支付，请
        <span class="key">【微信/支付宝】</span>
        搜索
        <span class="key">【乐汇园无人智能售货柜】</span>
        小程序进入支付，以免影响个人信用，如有疑问， 请联系客服
        <span class="key">400-928-8711</span>
        。
      </div>
    </div>
    <div class="tip">
      <div class="">* 设备地址：  该设备运营管理中填写的设备地址，如需修改，请至【设备管理—设备列表—零售柜—配置信息】变更。 </div>
      <div class="">* 客服电话：  默认电话为设备绑定的客服电话，或者商家所设置的客服电话，如需修改，请至【设备管理—设备列表—零售柜—配置信息】变更。</div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit(ruleFormRef)" color="#0071bb">确定</el-button>
        <el-button @click="close()">取消</el-button>
      </div>
    </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus, Check } from '@element-plus/icons-vue'
import { defineProps,defineEmits,toRefs } from 'vue';
const emit = defineEmits(['close','submit']);
const props = defineProps<{ formData:any }>();
// 取消
const close = () => {
    emit('close')
}
// 确定
const submit = () => {
  emit('submit')
}
const show = ref<boolean>(true)
</script>

<style lang="scss" scoped>
.df{
    display: flex;
    align-items: center;
}
.fd{
  font-weight:bold;
}
.item{
  position: relative;
  border: 1px solid #0071bb;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  .key{
    color: blue;
  }
  .name{
    padding: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
    .text{
      font-size: 16px;
      margin-right: 4px;
    }
  }
  .content{
    padding: 6px;
    box-sizing: border-box;
    background-color:#00ffff;
  }
}
.triangle {
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  margin: auto;
  border: 30px solid transparent;
  transform: rotate(-90deg);
  border-bottom-color: #0071bb;
  border-right-color: #0071bb;
  border-bottom-right-radius: 10px;
}
.tip{
  color: #4D4D4D;
  font-size: 12px;
  margin-top: 20px;
}
.dialog-footer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
}
</style>